import React, { useEffect, useState } from 'react';
import { Checkbox, Button, Tooltip, message } from 'antd';
import Tables from '../Strategy/Importcomponent/component/tab';
import { randomKey } from '../../../utils/utils';
import './index.less';
export default function tempalteAddStrategy(props) {
  const [tableData, setTableData] = useState([]); // 冲突table数据
  const [insideData, setInsideData] = useState([]); // 三方数据
  const [isImport, setIsImport] = useState(false); // 是否全选导入为准
  const [isSterm, setIsSterm] = useState(false); // 是否全选系统为准
  useEffect(() => {
    resetData();
  }, []);
  // 模板新增提交
  function handleSubmit(e) {
    // 验证规则
    const lists = tableData.map((item) => {
      if (!item.is_import && !item.is_Sterm) {
        message.warning('请选择冲突项解决方式');
        throw '请选择冲突项解决方式';
      }
      item.import_execute_action = (item.is_import && 'rewrite') || 'skip';
      item.children &&
        item.children.forEach((it) => {
          if (!it.is_import && !it.is_Sterm) {
            message.warning('请选择冲突项解决方式');
            throw '请选择冲突项解决方式';
          }
          it.import_execute_action = (it.is_import && 'rewrite') || 'skip';
        });
      return item;
    });
    props.setAddTemplate && props.setAddTemplate(lists);
  }
  const coumsList = [
    {
      title: '项目',
      key: 'title',
      dataIndex: 'title',
      render: (text, record) => {
        return (
          <Tooltip title={text} placement='topLeft'>
            {text}
          </Tooltip>
        );
      },
    },
    {
      title: '描述',
      key: 'remark',
      dataIndex: 'remark',
      width: 250,
      render: (text, record) => {
        return (
          <Tooltip title={text} placement='topLeft'>
            {text}
          </Tooltip>
        );
      },
    },
    {
      title: '当前使用情况',
      key: 'is_used',
      dataIndex: 'is_used',
      render: (text, record) => {
        return (
          <Tooltip title={text ? '使用中' : '未被引用'} placement='topLeft'>
            {text ? '使用中' : '未被引用'}
          </Tooltip>
        );
      },
    },
    {
      title: (
        <Checkbox onChange={importCheckAll} checked={isImport}>
          全选
        </Checkbox>
      ),
      key: 'is_import',
      dataIndex: 'is_import',
      render: (text, record) => {
        return (
          <Checkbox value={record.id} onChange={checkImport} checked={text}>
            以导入数据为准
          </Checkbox>
        );
      },
    },
    {
      title: (
        <Checkbox onChange={stremCheckAll} checked={isSterm}>
          全选
        </Checkbox>
      ),
      key: 'is_Sterm',
      dataIndex: 'is_Sterm',
      render: (text, record) => {
        return (
          <Checkbox value={record.id} onChange={checkStrem} checked={text}>
            以系统数据为准
          </Checkbox>
        );
      },
    },
  ];
  const insideList = [
    {
      title: 'ID',
      width: 100,
      render: (text, record, index) => {
        return <>{index + 1}</>;
      },
    },
    {
      title: '项目',
      key: 'title',
      dataIndex: 'title',
      render: (text, record) => {
        return (
          <Tooltip title={text} placement='topLeft'>
            {text}
          </Tooltip>
        );
      },
    },
    {
      title: '描述',
      key: 'remark',
      dataIndex: 'remark',
      width: 250,
      render: (text, record) => {
        return (
          <Tooltip title={text} placement='topLeft'>
            {text}
          </Tooltip>
        );
      },
    },
  ];
  // 重新设置
  function resetData() {
    const lists = props.data.map((item) => {
      item.is_import = false;
      item.is_Sterm = false;
      item.children &&
        item.children.forEach((it) => {
          it.is_import = false;
          it.is_Sterm = false;
        });
      return item;
    });
    const newUnintial = props.insideData.map((item) => {
      item.id = randomKey();
      return item;
    });
    setTableData(lists);
    setInsideData(newUnintial);
  }
  // 以导入为准全选
  function importCheckAll(e) {
    const lists = tableData.map((item) => {
      item.is_import = e.target.checked;
      if (e.target.checked) {
        item.is_Sterm = !e.target.checked;
      }
      item.children &&
        item.children.forEach((it) => {
          it.is_import = e.target.checked;
          if (e.target.checked) {
            it.is_Sterm = !e.target.checked;
          }
        });
      return item;
    });
    setIsImport(e.target.checked);
    if (e.target.checked) {
      setIsSterm(!e.target.checked);
    }
    setTableData(lists);
  }
  // 已系统为准
  function stremCheckAll(e) {
    const lists = tableData.map((item) => {
      item.is_Sterm = e.target.checked;
      if (e.target.checked) {
        item.is_import = !e.target.checked;
      }
      item.children &&
        item.children.forEach((it) => {
          it.is_Sterm = e.target.checked;
          if (e.target.checked) {
            it.is_import = !e.target.checked;
          }
        });
      return item;
    });
    setIsSterm(e.target.checked);
    if (e.target.checked) {
      setIsImport(!e.target.checked);
    }
    setTableData(lists);
  }
  // 导入系统单选
  function checkImport(e) {
    e.stopPropagation();
    let isAllImport = true;
    const lists = tableData.map((item) => {
      if (item.id === e.target.value) {
        item.is_import = e.target.checked;
        if (e.target.checked) {
          item.is_Sterm = !e.target.checked;
        }
      }
      !item.is_import && (isAllImport = false);
      item.children &&
        item.children.forEach((it) => {
          if (it.id === e.target.value) {
            it.is_import = e.target.checked;
            if (e.target.checked) {
              it.is_Sterm = !e.target.checked;
            }
          }
          !it.is_import && (isAllImport = false);
        });
      return item;
    });
    setIsImport(isAllImport);
    if (!isAllImport) {
      setIsSterm(isAllImport);
    }
    setTableData(lists);
  }
  // 导入系统单选
  function checkStrem(e) {
    e.stopPropagation();
    let isAllStrem = true;
    const lists = tableData.map((item) => {
      if (item.id === e.target.value) {
        item.is_Sterm = e.target.checked;
        if (e.target.checked) {
          item.is_import = !e.target.checked;
        }
      }
      !item.is_Sterm && (isAllStrem = false);
      item.children &&
        item.children.forEach((it) => {
          if (it.id === e.target.value) {
            it.is_Sterm = e.target.checked;
            if (e.target.checked) {
              it.is_import = !e.target.checked;
            }
          }
          !it.is_Sterm && (isAllStrem = false);
        });
      return item;
    });
    setIsSterm(isAllStrem);
    if (!isAllStrem) {
      setIsImport(isAllStrem);
    }
    setTableData(lists);
  }
  return (
    <>
      <Tables data={tableData} insideData={insideData} columns={coumsList} insideColumns={insideList} />
      <div className='template-tips-btn'>
        <Button type='primary' htmlType='submit' className='login-form-button' onClick={() => handleSubmit()}>
          确定
        </Button>
      </div>
    </>
  );
}
